<template>
  <div>
    <el-form ref="form" :model="writeForm" label-width="100px">
      <el-form-item label="标题">
        <el-input placeholder="请输入内容" v-model="writeForm.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="文章封面">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-time-select v-model="writeForm.pubDate" placeholder="选择时间"></el-time-select>
      </el-form-item>
      <div class="writeForm-item-bg">
        <div class="edit_container">
          <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </div>
      </div>
      <div class="writeForm-item-bg">
        <el-button>草稿</el-button>
        <el-button type="primary">发布</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      writeForm: {
        title: "",
        pubDate: ""
      },
      content: "<p>hello world</p>",
      //   编辑器主题
      editorOption: {
        theme: "snow"
      }
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    saveHtml: function(event) {
      alert(this.content);
    }
  }
};
</script>

<style scoped lang="scss">
.writeForm-item-bg {
  background: #f8f8f8;
  padding: 15px 10px;
  margin-top: 30px;
  .edit_container {
    background: #fff;
  }
}
</style>

